<%@ page import="cn.labbook.bluetooth.constant.AmmeterConstant" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    %>
    <base href="<%=basePath%>">
    <title>蓝牙电表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="assets/css/admin/reset.css"/>
    <link rel="stylesheet" type="text/css" href="assets/plugins/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_893379_qj8lfap4ylj.css"/>
</head>
<style>
    /*让徽章上下居中*/
    .layui-badge {
        top: 50%;
        transform: translateY(-50%);
    }
    #qrcode{
        margin-top: 15px;
    }
    #qrcode img{
        margin-top: 10px;
        width: 120px;
        height: 120px;
        display: inline-block!important;
    }
    .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<body>
<div>
    <div class=" clearfix margin-15">
        <div class="layui-col-md12">
            <div class="layui-card-header">
                电表列表
            </div>
            <div class="layui-form layuiadmin-card-header-auto padding-tb-10 layui-card"
                 lay-filter="layadmin-userfront-formlist" id="searchForm">
                <div class="layui-form-item searchDiv" style="margin-bottom: 0">
                    <%--<div class="layui-inline">--%>
                        <%--<label class="layui-form-label" style="text-align: left">房客名称</label>--%>
                        <%--<div class="layui-input-block">--%>
                            <%--<input type="text" placeholder="请输入房客名称" autocomplete="off"--%>
                                   <%--class="layui-input" id="userName">--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <div class="layui-inline">
                        <label class="layui-form-label">服务状态</label>
                        <div class="layui-input-block ">
                            <select name="serverStatus" id="serverStatus">
                                <option value="">请选择</option>
                                <option value=<%=AmmeterConstant.serverStatus.NOTEXPIRE%>>未到期</option>
                                <option value=<%=AmmeterConstant.serverStatus.EXPIRE%>>已到期</option>
                                <option value=<%=AmmeterConstant.serverStatus.UPCOMINGEXPIRE%>>即将到期</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-useradmin" id="search"
                                lay-filter="LAY-user-front-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-tab-content">
                <div class="layui-btn-div">
<%--                    <button class="layui-btn" data-type="addPm" id="pay">服务费充值</button>--%>
                    <button class="layui-btn" data-type="addPm" id="reimbursement">服务费报销</button>
                    <button class="layui-btn" data-type="addPm" id="electricityPrice">电价设置</button>
                    <button class="layui-btn" data-type="addPm" id="addPm">绑定电表</button>
                </div>
                <table class="layui-table" id="payPmList" lay-filter="payPmList"></table>
            </div>
        </div>
    </div>
</div>
<div id="addPmDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="editForm" id="editForm">
        <table class="table_all">
            <tbody>
            <tr>
                <th><span class="red">*</span>电表地址</th>
                <td>
                    <input type="text" name="location" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>最高充值金额</th>
                <td style="width: 75%">
                    <input type="text" name="rechargeAmount" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
<%--            <tr>--%>
<%--                <th style="width: 25%"><span class="red">*</span>最大电流</th>--%>
<%--                <td style="width: 75%">--%>
<%--                    <input type="text" name="electricity" autocomplete="off"--%>
<%--                           class="layui-input layui-form-danger" placeholder="">--%>
<%--                </td>--%>
<%--            </tr>--%>
            <%--<tr>--%>
                <%--<th style="width: 25%"><span class="red">*</span>欠费是否拉闸</th>--%>
                <%--<td style="width: 75%">--%>
                    <%--<select name="switchStatus" >--%>
                        <%--<option value=<%=AmmeterConstant.switchStatus.YES%>>拉闸</option>--%>
                        <%--<option value=<%=AmmeterConstant.switchStatus.NO%>>不拉闸</option>--%>
                    <%--</select>--%>
                <%--</td>--%>
            <%--</tr>--%>
<%--            <tr>--%>
<%--                <th style="width: 25%"><span class="red">*</span>缴费类型</th>--%>
<%--                <td style="width: 75%">--%>
<%--                    <select name="payType" >--%>
<%--                        <option value="">请选择</option>--%>
<%--                        <option value=<%=AmmeterConstant.payType.QTR%>>季费</option>--%>
<%--                        <option value=<%=AmmeterConstant.payType.HFYEAR%>>半年费</option>--%>
<%--                        <option value=<%=AmmeterConstant.payType.YEAR%>>年费</option>--%>
<%--                    </select>--%>
<%--                </td>--%>
<%--            </tr>--%>
            </tbody>
        </table>
        <div class="layui-form-item">
        <div class="submitForm">
        <button class="layui-btn" type="button" lay-submit="" lay-filter="editSubmit" id="cancell">提交</button>
        <button type="button" class="layui-btn layui-btn-primary" id="cancel" onclick="hideFun()">取消</button>
        </div>
        </div>
    </form>
</div>
<div id="activatePmDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="activateForm" id="activateForm">
        <table class="table_all">
            <tbody>
            <tr>
                <th><span class="red">*</span>电表序列号</th>
                <td>
                    <input type="text" name="ammeterId" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th><span class="red">*</span>电表地址</th>
                <td>
                    <input type="text" name="location" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>最高充值金额</th>
                <td style="width: 75%">
                    <input type="text" name="rechargeAmount" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr class="default" type="hidden">
                <th style="width: 25%"><span class="red">*</span>白天电价</th>
                <td style="width: 75%">
                    <input type="text" name="dayPrice" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" id="dayPrice">
                </td>
            </tr>
            <tr class="default" type="hidden">
                <th style="width: 25%"><span class="red">*</span>晚上电价</th>
                <td style="width: 75%">
                    <input type="text" name="nightPrice" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" id="nightPrice">
                </td>
            </tr>
            <tr class="default" type="hidden">
                <th style="width: 25%"><span class="red">*</span>生效时间</th>
                <td style="width: 75%">
                    <input type="text" name="effectTime" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" id="effectTime">
                </td>
            </tr>
<%--            <tr>--%>
<%--                <th style="width: 25%"><span class="red">*</span>欠费是否拉闸</th>--%>
<%--                <td style="width: 75%">--%>
<%--                    <select name="switchStatus" lay-verify="required">--%>
<%--                        <option value="">请选择</option>--%>
<%--                        <option value=<%=AmmeterConstant.switchStatus.YES%>>拉闸</option>--%>
<%--                        <option value=<%=AmmeterConstant.switchStatus.NO%>>不拉闸</option>--%>
<%--                    </select>--%>
<%--                </td>--%>
<%--            </tr>--%>
            <%--<tr>--%>
                <%--<th style="width: 25%"><span class="red">*</span>存在试用期</th>--%>
                <%--<td style="width: 75%">--%>
                    <%--<select name="tryStatus" lay-verify="required">--%>
                        <%--<option value="">请选择</option>--%>
                        <%--<option value=<%=AmmeterConstant.tryStatus.YES%>>存在</option>--%>
                        <%--<option value=<%=AmmeterConstant.tryStatus.NO%>>不存在</option>--%>
                    <%--</select>--%>
                <%--</td>--%>
            <%--</tr>--%>
            </tbody>
        </table>
        <div class="layui-form-item">
            <div class="submitForm">
                <button class="layui-btn" type="button" lay-submit="" lay-filter="activateSubmit" id="cancel5">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancel6" onclick="hideFun()">取消</button>
            </div>
        </div>
    </form>
</div>
<div id="editBalanceDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="editBalanceForm" id="editBalanceForm">
        <table class="table_all">
            <tbody>
            <tr>
                <th style="width: 25%"><span class="red">*</span>电表余额</th>
                <td style="width: 75%">
                    <input type="text" name="balance" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" id="balance">
                </td>
            </tr>
        </table>
        <div class="layui-form-item">
            <div class="submitForm">
                <button class="layui-btn" type="button" lay-submit="" lay-filter="editBalanceSubmit" id="cancel9">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancel10" onclick="hideFun()">取消</button>
            </div>
        </div>
    </form>
</div>
<div id="servicePayPmDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="servicePayForm" id="servicePayForm">
        <table class="table_all">
            <tbody>
            <tr>
                <th style="width: 35%"><span class="red">*</span>所需服务费用</th>
                <td style="width: 65%">
                    <input type="text" name="rechargeAmount" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" id="rechargeAmount" readonly>
                </td>
            </tr>

            <%--<tr>--%>
                <%--<th style="width: 35%"><span class="red">*</span>请选择缴费期限</th>--%>
                <%--<td style="width: 65%">--%>
                    <%--<select name="payType" lay-verify="required" id="payType" lay-filter="payType">--%>
                        <%--<option value="">请选择</option>--%>
                        <%--<option value=<%=AmmeterConstant.payType.QTR%>>季费</option>--%>
                        <%--<option value=<%=AmmeterConstant.payType.HFYEAR%>>半年费</option>--%>
                        <%--<option value=<%=AmmeterConstant.payType.YEAR%>>年费</option>--%>
                    <%--</select>--%>
                <%--</td>--%>
            <%--</tr>--%>
<%--            <tr>--%>
<%--                <th style="width: 35%"><span class="red">*</span>实付金额</th>--%>
<%--                <td style="width: 65%">--%>
<%--                    <input type="text" name="saleAmount" lay-verify="required" autocomplete="off"--%>
<%--                           class="layui-input layui-form-danger" placeholder="" lay-filter="saleAmount" id="saleAmount">--%>
<%--                </td>--%>
<%--            </tr>--%>
            </tbody>
        </table>
        <div style="font-size: 15px;text-align: center;width: 300px;margin: 10px auto">
            <p style="text-align: center;color: red">注意:该服务费为一年一缴，请及时对即将到期的电表进行缴纳操作</p>
        </div>
        <div id="qrcode" style="text-align: center">
<%--            <p>请用微信扫码支付，支付<span style="font-size: 24px">48.5</span></p>--%>
        </div>
        <div class="layui-form-item" id="payState">
            <div class="submitForm">
                <button class="layui-btn" type="button" lay-submit="" lay-filter="alipaySubmit" id="alipay">支付宝</button>
                <button class="layui-btn" type="button" lay-submit="" lay-filter="wxpaySubmit" id="wxpay">微信</button>
            </div>
        </div>
    </form>
</div>
<div id="reimbursementPmDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="reimbursementForm" id="reimbursementForm">
        <table class="table_all">
            <tbody>
            <tr>
                <th style="width: 25%"><span class="red">*</span>是否报销</th>
                <td style="width: 75%">
                    <select name="reimbursement" lay-verify="required" id="reimbursementType">
                        <option value="0">否</option>
                        <option value="1">是</option>
                    </select>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="layui-form-item">
            <div class="submitForm">
                <button class="layui-btn" type="button" lay-submit="" lay-filter="reimbursementSubmit" id="cancel11">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancel12" onclick="hideFun()">取消</button>
            </div>
        </div>
    </form>
</div>
<div id="electricityPricePmDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="electricityPriceForm" id="electricityPriceForm">
        <table class="table_all">
            <tbody>
            <tr>
                <th style="width: 25%">电价方案</th>
                <td style="width: 75%">
                <input type="hidden" name="ladderId" autocomplete="off" placeholder="" >
                <input type="hidden" name="ammeterId" autocomplete="off" placeholder="" >
                <select name="program" lay-verify="required" lay-filter="program">
                    <option value="0">默认电价</option>
<%--                    <option value="1">阶梯电价</option>--%>
                </select>
                </td>
            </tr>
<%--               <tr class="ladder" type="hidden">--%>
<%--                   <th style="width: 25%"><span class="red">*</span>第一阶梯</th>--%>
<%--                   <td style="width: 75%">--%>
<%--                       <input type="text" name="rechargeAmount" value="0" lay-verify="required" autocomplete="off"--%>
<%--                              class="layui-input layui-form-danger" placeholder="" readonly>--%>
<%--                   </td>--%>
<%--               </tr>--%>
<%--               <tr class="ladder" type="hidden">--%>
<%--                   <th style="width: 25%"><span class="red">*</span>第一阶梯价格</th>--%>
<%--                   <td style="width: 75%">--%>
<%--                       <input type="text" name="firstPrice" lay-verify="required" autocomplete="off"--%>
<%--                              class="layui-input layui-form-danger" placeholder="" id="firstPrice">--%>
<%--                   </td>--%>
<%--               </tr>--%>
<%--               <tr class="ladder" type="hidden">--%>
<%--                   <th style="width: 25%"><span class="red">*</span>第二阶梯</th>--%>
<%--                   <td style="width: 75%">--%>
<%--                       <input type="text" name="ladderStartValue" lay-verify="required" autocomplete="off"--%>
<%--                              class="layui-input layui-form-danger" placeholder="" id="ladderStartValue">--%>
<%--                   </td>--%>
<%--               </tr>--%>
<%--               <tr class="ladder" type="hidden">--%>
<%--                   <th style="width: 25%"><span class="red">*</span>第二阶梯价格</th>--%>
<%--                   <td style="width: 75%">--%>
<%--                       <input type="text" name="secondPrice" lay-verify="required" autocomplete="off"--%>
<%--                              class="layui-input layui-form-danger" placeholder="" id="secondPrice">--%>
<%--                   </td>--%>
<%--               </tr>--%>
<%--               <tr class="ladder" type="hidden">--%>
<%--                   <th style="width: 25%"><span class="red">*</span>第三阶梯</th>--%>
<%--                   <td style="width: 75%">--%>
<%--                       <input type="text" name="ladderEndValue" lay-verify="required" autocomplete="off"--%>
<%--                              class="layui-input layui-form-danger" placeholder="" id="ladderEndValue">--%>
<%--                   </td>--%>
<%--               </tr>--%>
<%--               <tr class="ladder" type="hidden">--%>
<%--                   <th style="width: 25%"><span class="red">*</span>第三阶梯价格</th>--%>
<%--                   <td style="width: 75%">--%>
<%--                       <input type="text" name="thirdPrice" lay-verify="required" autocomplete="off"--%>
<%--                              class="layui-input layui-form-danger" placeholder="" id="thirdPrice">--%>
<%--                   </td>--%>
<%--               </tr>--%>
               <tr class="default" type="hidden">
                   <th style="width: 25%"><span class="red">*</span>白天电价</th>
                   <td style="width: 75%">
                       <input type="text" name="dayPrice" lay-verify="required" autocomplete="off"
                              class="layui-input layui-form-danger" placeholder="">
                   </td>
               </tr>
                <tr class="default" type="hidden">
                    <th style="width: 25%"><span class="red">*</span>晚上电价</th>
                    <td style="width: 75%">
                        <input type="text" name="nightPrice" lay-verify="required" autocomplete="off"
                               class="layui-input layui-form-danger" placeholder="">
                    </td>
                </tr>
            <tr class="default" type="hidden">
                <th style="width: 25%"><span class="red">*</span>生效时间</th>
                <td style="width: 75%">
                    <input type="text" name="effectTime" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" id="effectTime1">
                </td>
            </tr>
            </tbody>
        </table>
        <div class="layui-form-item">
            <div class="submitForm">
                <button class="layui-btn" type="button" lay-submit="" lay-filter="electricityPriceSubmit" id="cancel7">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancel8" onclick="hideFun()">取消</button>
            </div>
        </div>
    </form>
</div>
<div id="msgPmDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="msgForm" id="msgForm">
        <table class="table_all">
            <tbody>
            <tr>
                <th><span class="red">*</span>创建时间</th>
                <td>
                    <input type="text" name="createTime" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th><span class="red">*</span>电表地址</th>
                <td>
                    <input type="text" name="location" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 30%"><span class="red">*</span>电表状态</th>
                <td style="width: 70%">
                    <input type="text" name="status" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 30%"><span class="red">*</span>最高充值金额</th>
                <td style="width: 70%">
                    <input type="text" name="rechargeAmount" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
<%--            <tr>--%>
<%--                <th style="width: 25%"><span class="red">*</span>最大电流</th>--%>
<%--                <td style="width: 75%">--%>
<%--                    <input type="text" name="electricity" lay-verify="required" autocomplete="off"--%>
<%--                           class="layui-input layui-form-danger" placeholder="">--%>
<%--                </td>--%>
<%--            </tr>--%>
            <tr>
                <th style="width: 30%"><span class="red">*</span>总度数</th>
                <td style="width: 70%">
                    <input type="text" name="amount" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 30%"><span class="red">*</span>余额</th>
                <td style="width: 70%">
                    <input type="text" name="balance" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>上传数据时间</th>
                <td style="width: 75%">
                    <input type="text" name="readingTime" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 30%"><span class="red">*</span>电表服务状态</th>
                <td style="width: 70%">
                    <input type="text" name="serverStatus" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
<%--            <tr>--%>
<%--                <th style="width: 30%"><span class="red">*</span>服务到期时间</th>--%>
<%--                <td style="width: 70%">--%>
<%--                    <input type="text" name="serverTime" lay-verify="required" autocomplete="off"--%>
<%--                           class="layui-input layui-form-danger" placeholder="" readonly>--%>
<%--                </td>--%>
<%--            </tr>--%>
            <tr>
                <th style="width: 30%"><span class="red">*</span>是否欠费</th>
                <td style="width: 70%">
                    <input type="text" name="oweStatus" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <%--<tr>--%>
                <%--<th style="width: 30%"><span class="red">*</span>电表欠费是否拉闸</th>--%>
                <%--<td style="width: 70%">--%>
                    <%--<input type="text" name="switchStatus" lay-verify="required" autocomplete="off"--%>
                           <%--class="layui-input layui-form-danger" placeholder="" readonly>--%>
                <%--</td>--%>
            <%--</tr>--%>
            <tr>
                <th style="width: 30%"><span class="red">*</span>电表激活时间</th>
                <td style="width: 70%">
                    <input type="text" name="activateTime" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 30%"><span class="red">*</span>服务费率</th>
                <td style="width: 70%">
                    <input type="text" name="payPrice" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>
<%--<div id="wxPayPmDiv" class="divHideLayer">--%>
<%--    <form class="layui-form" lay-filter="wxPayForm" id="wxPayForm">--%>
<%--&lt;%&ndash;        <input type="hidden" value="${code_url}" id="codeUrl">&ndash;%&gt;--%>
<%--        <div id="qrcode"></div>--%>
<%--        <table class="table_all">--%>
<%--            <tbody>--%>

<%--            </tbody>--%>
<%--        </table>--%>
<%--    </form>--%>
<%--</div>--%>
<script type="text/html" id="barDemo">
    <a class="btn-white btn-success layui-btn-xs" lay-event="edit">电表设置</a>
    <a class="btn-white btn-success layui-btn-xs" lay-event="msg">详情信息</a>
<%--    <a class="btn-white btn-success layui-btn-xs" lay-event="editBalance">更改余额</a>--%>
</script>
</body>
<script src="assets/plugins/Jquery/jquery.min.js"></script>
<script src="assets/plugins/layui/layui.all.js"></script>
<script src="assets/js/common.js"></script>
<script src="assets/js/qrcode.min.js"></script>
<script>
    var ammeterId = null;
    $(function () {
        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#effectTime', //指定元素
            });
            laydate.render({
                elem: '#effectTime1', //指定元素
            });
        });


        layui.use(['table', 'form', 'laydate'], function () {
            var table = layui.table,
                form = layui.form;
            var data = [
                {checkbox: true},
                {type: 'numbers', title: '序号'},
                {field: 'ammeterId', title: '电表序列号', sort: false, align: 'center'},
                // {
                //     field: 'status', title: '电表状态', sort: false, align: 'center', templet: function (d) {
                //         if (d.status == 0) return '<span class="layui-badge">激活</span>'
                //         else if (d.status == 1) return '<span class="layui-badge layui-bg-green">未激活</span>'
                //         else return '<span class="layui-badge layui-bg-cyan">未知</span>'
                //     }
                // },
                {field: 'location', title: '电表地址', sort: false, align: 'center'},
                {field: 'userName', title: '房客', sort: false, align: 'center'},
                {
                    field: 'serverStatus', title: '电表服务状态', sort: false, align: 'center', templet: function (d) {
                        if (d.serverStatus == <%=AmmeterConstant.serverStatus.NOTEXPIRE%>) return '<span class="layui-badge layui-bg-green">未到期</span>'
                        else if (d.serverStatus == <%=AmmeterConstant.serverStatus.EXPIRE%>) return '<span class="layui-badge layui-bg">已到期</span>'
                        else if (d.serverStatus == <%=AmmeterConstant.serverStatus.UPCOMINGEXPIRE%>) return '<span class="layui-badge layui-bg-orange">即将到期</span>'
                        else return '<span class="layui-badge layui-bg-cyan">未知</span>'
                    }
                },
                {field: 'amount', title: '电表度数', sort: false, align: 'center'},
                {field: 'balance', title: '余额', sort: false, align: 'center'},
                // {field: 'serverTime', title: '服务到期时间', sort: false, align: 'center'},
                {
                    field: 'isSkimp', title: '服务费承担方', sort: false, align: 'center'
                    , templet: function (d) {
                        if (d.isSkimp == <%=AmmeterConstant.serverStatus.NOTEXPIRE%>) return '<span class="layui-badge layui-bg-green">房东</span>'
                        else if (d.isSkimp == <%=AmmeterConstant.serverStatus.EXPIRE%>) return '<span class="layui-badge layui-bg">房客</span>'
                    }},
                {title: '操作', sort: false, align: 'center', toolbar: '#barDemo'}
            ];
            table.render(
                renderTable("#payPmList", 'ammeter/page', data)
            );

            table.on('tool(payPmList)', function (obj) {
                var data = obj.data;
                ammeterId = data.ammeterId
                if (obj.event === "msg") {
                    var msgStatus = msgStatusSet(data.status);
                    var serverStatus = serverStatusSet(data.serverStatus);
                    var switchStatus = switchStatusSet(data.switchStatus);
                    var oweStatus = oweStatusSet(data.oweStatus);
                    layer.open({
                        type: 1,
                        title: "详情",
                        btnAlign: "c",
                        offset: ['25px'],
                        area: ['500px', '81%'],
                        content: $("#msgPmDiv"),
                        success: function () {
                            form.val('msgForm', {
                                "createTime": data.createTime
                                , "location": data.location
                                , "status": msgStatus
                                , "rechargeAmount": data.rechargeAmount
                                , "amount": data.amount
                                , "balance": data.balance
                                , "readingTime": data.readingTime
                                , "serverStatus": serverStatus
                                // , "serverTime": data.serverTime
                                , "tryStatus": data.tryStatus
                                , "oweStatus": oweStatus
                                , "switchStatus": switchStatus
                                , "activateTime": data.activateTime
                                , "payPrice": data.payPrice
                            })
                        },
                        end: function (i) {
                            layer.close(i);
                            hideWithReset("#msgPmDiv", "#msgForm")
                        }
                    });
                }
                if (obj.event === "editBalance") {
                    layer.open({
                        type: 1,
                        title: "详情",
                        btnAlign: "c",
                        offset: ['150px'],
                        area: ['500px', '340px'],
                        content: $("#editBalanceDiv"),
                        success: function () {
                            form.val('editBalanceForm', {
                                "balance": data.balance
                                // , "location": data.location
                            })
                        },
                        end: function (i) {
                            layer.close(i);
                            hideWithReset("#editBalanceDiv", "#editBalanceForm")
                        }
                    });
                }
                if (obj.event === "edit") {
                    layer.open({
                        type: 1,
                        title: "详情",
                        btnAlign: "c",
                        offset: ['200px'],
                        area: ['500px', '250px'],
                        content: $("#addPmDiv"),
                        success: function () {
                            form.val('editForm', {
                                "createTime": data.createTime
                                , "location": data.location
                                , "status": data.status
                                , "rechargeAmount": data.rechargeAmount
                                , "amount": data.amount
                                , "balance": data.balance
                                , "readingTime": data.readingTime
                                , "serverStatus": data.serverStatus
                                , "serverTime": data.serverTime
                                , "tryStatus": data.tryStatus
                                , "oweStatus": data.oweStatus
                                , "switchStatus": data.switchStatus
                                , "activateTime": data.activateTime
                                , "payPrice": data.payPrice
                            })
                        },
                        end: function (i) {
                            layer.close(i);
                            hideWithReset("#addPmDiv", "#editForm")
                        }
                    });
                }
            });
            form.verify({
                overdueDays: [/^[+]{0,1}(\d+)$/, '逾期天数必须是正整数']
            });
            form.on('select(program)', function(data){
                if(data.value==1){
                    $(".ladder").show();
                    $(".default").hide();
                }else{
                    $(".ladder").hide();
                    $(".default").show();
                }
            })
            $("#addPm").click(function () {
                layer.open({
                    type: 1,
                    title: "绑定电表",
                    btnAlign: "c",
                    offset: ['100px'],
                    area: ['500px', '600px'],
                    content: $("#activatePmDiv"),
                    success: function () {

                    },
                    end: function (i) {
                        layer.close(i)
                        hideWithReset("#activatePmDiv", "#editForm")
                    }
                });
            })
            form.on('submit(editSubmit)', function (obj) {
                var url = "ammeter/edit";
                var data = obj.field;
                data.ammeterId = ammeterId;
                data.isSkimp = 0;
                postAjaxReq(url, data, function (res) {
                    if (res.code == 1) {
                        layer.closeAll();
                        table.reload('payPmList');
                        layer.msg("修改成功")
                        userId = null
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });
            form.on('submit(activateSubmit)', function (obj) {
                var url = "ammeter/activate"
                var data = obj.field
                postAjaxReq(url, data, function (res) {
                    if (res.code == 1) {
                        layer.closeAll();
                        table.reload('payPmList');
                        layer.msg("激活成功")
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });
            form.on('submit(editBalanceSubmit)', function (obj) {
                var url = "ammeter/editBalance"
                var data = obj.field
                data.ammeterId = ammeterId
                postAjaxReq(url, data, function (res) {
                    if (res.code == 1) {
                        console.log(res)
                        layer.closeAll();
                        table.reload('payPmList');
                        layer.msg(res.data)
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });
            $("#pay").on("click",function(){
                $("#qrcode").empty();
                var serverData = table.checkStatus('payPmList').data;
                if(serverData.length==0){
                    layer.msg("请至少选中一个电表进行充值！")
                    return;
                }
                var price = 0;
                for(var i=0;i<serverData.length;i++){
                    price += serverData[i].payPrice
                };
                layer.open({
                    type: 1,
                    title: "服务费充值",
                    btnAlign: "c",
                    offset: ['150px'],
                    area: ['400px', '500px'],
                    content: $("#servicePayPmDiv"),
                    success: function () {
                        form.val('servicePayForm', {
                            "rechargeAmount": Number(price).toFixed(2)
                        })
                    },
                    end: function (i) {
                        layer.close(i);
                        hideWithReset("#servicePayPmDiv", "#servicePayForm")
                    }
                });
            });
            // form.on('select(payType)', function(){
            //     $("#saleAmount").val($("#payType").val()/3*$("#rechargeAmount").val())
            // });
            // $("#payType").on("change",function(){
            //     console.log(11111)
            //     $("#saleAmount").val($("#payType").val()/3*$("#rechargeAmount").val())
            // });
            form.on('submit(alipaySubmit)', function (obj) {
                var data = obj.field;
                var serverData = table.checkStatus('payPmList').data;
                data.serverData = JSON.stringify(serverData);
                // data.payType = 12;
                arrayAjaxReq("pay", data, function (res) {
                     var data = res.data;
                    if (res.code == 1) {
                        encodeURIComponent(encodeURIComponent(data.su))
                        console.log(JSON.stringify(data))
                        self.location = "alipay?no="+data.no+"&su="+encodeURIComponent(encodeURIComponent(data.su))+"&to="+data.to+"&bo="+data.bo
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });
            form.on('submit(wxpaySubmit)', function (obj) {
                $("#qrcode").empty();
                $("#qrcode").append("<p>请用微信扫码支付，支付<span style=\"font-size: 24px\">"+$("#rechargeAmount").val()+"</span></p>")
                var data = obj.field;
                var serverData = table.checkStatus('payPmList').data;
                console.log(serverData);
                var ammeterIds = serverData[0].ammeterId;
                for(var i=1;i<serverData.length;i++){
                    ammeterIds = ammeterIds.concat(",").concat(serverData[i].ammeterId);
                }
                data.ammeterIds = ammeterIds;
                arrayAjaxReq("weixin/native/payment", data, function (res) {
                    if (res != null) {
                        var code = res.code_url;
                        var outTradeNo = res.out_trade_no;
                        console.log(code);
                        new QRCode(document.getElementById("qrcode"), code);
                        var timeOut1;
                        var timeOut = setInterval(function () {
                            data.outTradeNo=outTradeNo;
                            jQuery.ajax({
                                url:"weixin/native/check",
                                type: 'get',
                                data:{outTradeNo:outTradeNo},
                                success: function (res) {
                                    if (res.msg=="success") {
                                        clearInterval(timeOut);
                                        clearTimeout(timeOut1);
                                        layer.closeAll();
                                        layer.msg("支付成功!",{time: 3000});
                                        hideWithReset("#servicePayPmDiv","#servicePayForm");
                                    }
                                }
                            });
                        }, 1000);
                        timeOut1 = setTimeout(function(){
                            clearInterval(timeOut);
                            clearTimeout(timeOut1)
                            layer.closeAll();
                            layer.msg("支付超时", {time: 3000});
                            hideWithReset("#servicePayPmDiv","#servicePayForm")
                        },60000);
                    } else {
                        layer.msg(res.msg)
                    }
                });
                // $("#payType").hide();
            });
            $("#reimbursement").on("click",function(){
                var serverData = table.checkStatus('payPmList').data;
                if(serverData.length==0){
                    layer.msg("请至少选中一个电表进行勾选设置报销！")
                    return;
                }
                // var ammeterIds = serverData.map(function(e){
                //     return e['ammeterId'];
                // });
                // console.log(ammeterIds)
                layer.open({
                    type: 1,
                    title: "服务费报销",
                    btnAlign: "c",
                    offset: ['150px'],
                    area: ['400px', '250px'],
                    content: $("#reimbursementPmDiv"),
                    end: function (i) {
                        layer.close(i);
                        hideWithReset("#reimbursementPmDiv", "#reimbursementForm")
                    }
                });
            });

            form.on('submit(reimbursementSubmit)', function (obj) {
                var url = "ammeter/reimbursement/set"
                var serverData = table.checkStatus('payPmList').data;
                var data = obj.field;
                data.serverData = JSON.stringify(serverData);
                arrayAjaxReq(url, data, function (res) {
                    if (res.code == 1) {
                        layer.closeAll();
                        table.reload('payPmList');
                        layer.msg("设置成功！")
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });
            $("#electricityPrice").on("click",function () {
                var serverData = table.checkStatus('payPmList').data;
                if(serverData.length==0 || serverData.length>1){
                    layer.msg("请选中一个电表进行设置！")
                    return;
                }
                var url = "ladderScheme/search";
                postAjaxReq(url, {ammeterId:serverData[0].ammeterId}, function (res) {
                    if (res.code == 1) {
                        var data = res.data;
                        form.val('electricityPriceForm', {
                            "ladderId" : data.ladderId
                            ,"ammeterId" : data.ammeterId
                            ,"program": data.program
                            ,"firstPrice": data.firstPrice
                            , "secondPrice": data.secondPrice
                            , "thirdPrice": data.thirdPrice
                            , "ladderEndValue": data.ladderEndValue
                            , "ladderStartValue": data.ladderStartValue
                            , "dayPrice": data.dayPrice
                            , "nightPrice": data.nightPrice
                            , "effectTime": data.effectTime
                        });
                        console.log(data.program);
                        if(data.program==1){
                            $(".ladder").show();
                            $(".default").hide();
                        }else{
                            $(".ladder").hide();
                            $(".default").show();
                        }
                    } else {
                        layer.msg(res.msg)
                    }
                });
                layer.open({
                    type: 1,
                    title: "阶梯电价设置",
                    btnAlign: "c",
                    offset: ['50px'],
                    area: ['500px', '650px'],
                    content: $("#electricityPricePmDiv"),
                    end: function (i) {
                        layer.close(i)
                        hideWithReset("#electricityPricePmDiv", "#electricityPriceForm")
                    }
                });
            });

            form.on('submit(electricityPriceSubmit)', function (obj) {
                var url = "ladderScheme/set"
                var serverData = table.checkStatus('payPmList').data;
                var data = obj.field;
                console.log("ammeterId:"+serverData[0].ammeterId);
                data.ammeterId = serverData[0].ammeterId;
                console.log(data);
                arrayAjaxReq(url, data, function (res) {
                    if (res.code == 1) {
                        layer.closeAll();
                        table.reload('payPmList');
                        layer.msg("电价方案设置成功！")
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });
            $("#search").click(function () {
                var serverStatus = $("#serverStatus").val();
                table.reload('payPmList', {
                    page: {curr: 1},
                    where: {
                        serverStatus: serverStatus
                    }
                })
            });
        });
    });
    $("#cancel").on("click", function () {
        layer.closeAll()
    });

    function hideFun() {
        layer.closeAll();
        userId = null
    }

    function hideWithReset(hide, reset) {
        $(hide).hide()
        $(reset)[0].reset()
    }
</script>
</body>
</html>
